<script setup name="worksAdd">
import {  ref, watch } from "vue";
import { useMyStore } from "../../store/index";
const props = defineProps(["showPageDeatil", "currentIndex"]);

const currentIx = ref(0);
const pageIndex = useMyStore().pageIndex;
const store = useMyStore();
const item = useMyStore().customArtwork.pageContent[pageIndex];
const currentEffectIndex = ref(0);
const colorIndex = ref(0);
const colorOpct = ref(0);
const colorList = ref([
  "255,0,0",
  `238, 119, 55`,
  `213, 175, 63`,
  "90, 176, 93",
  "86, 143, 214",
  "167, 96, 190",
  "90, 176, 93",
]);
const animation = [
  { name: "写入", className: "" },
  { name: "渐显", className: "text-focus-in" },
  { name: "收窄", className: "focus-in-contract" },
  { name: "展开", className: "focus-in-expand" },
  { name: "放开", className: "tracking-in-expand" },
  { name: "缩小", className: "tracking-in-contract" },
];
const clickEffectText = ["字体颜色", "字体背景颜色"];

const setColor = () => {
  const sizeOrbgSize = currentEffectIndex.value ? "sizeBgColor" : "color";
  item[props.currentIndex].style[sizeOrbgSize] =
    colorList.value[colorIndex.value].split().join() + "," + colorOpct.value;
};
const selectColor = (index) => {
  colorIndex.value = index;
  setColor();
};
const selectClickEffect = (index) => {
  currentEffectIndex.value = index;
  const sizeOrbgSize = currentEffectIndex.value ? "sizeBgColor" : "color";
  const sizeStyle = item[props.currentIndex].style[sizeOrbgSize].split(",");
  sizeStyle.splice(sizeStyle.length - 1, 1);
  const newSizeStyle = sizeStyle.join(",");
  const setColorIndex = colorList.value.indexOf(newSizeStyle);
  colorIndex.value = setColorIndex !== -1 ? setColorIndex : 0;
  setColor();
};

const onSelectAnimation = (index) => {
  currentIx.value = index;
  item[props.currentIndex].etranceAnimation = animation[index].className;
};
const deleteImageItem = () => {
  item.splice(props.currentIndex, 1);
  store.closeEditing();
};
watch(
  () => colorOpct.value,
  (newValue) => {
    setColor();
  }
);
</script>
<template>
  <van-action-sheet :overlay="false" v-model:show="props.showPageDeatil">
    <div class="bottom-sheet">
      <div class="material-top">
        <van-field
          input-align="center"
          rows="5"
          autosize
          type="textarea"
          placeholder="可以将想说的话写在提词板上"
          v-model="item[props.currentIndex].content"
        />
      </div>
      <div class="material-name no-transparency">
        <span style="margin-right: 30px">字号大小</span>
        <div class="slider">
          <van-slider
            max="100"
            min="0"
            step="1"
            v-model="item[props.currentIndex].style.size"
            active-color="linear-gradient(90deg, #dffabc 0%, #87f4df 100%)"
          >
            <template #button>
              <div class="custom-button"></div>
            </template>
          </van-slider>
        </div>
        <span> {{ item[props.currentIndex].style.size }}px </span>
      </div>

      <div class="click-effect">
        <div class="click-item">
          <div class="click-right">
            <div
              v-for="(item, index) in clickEffectText"
              :key="index"
              :class="currentEffectIndex == index ? 'active-lig' : ''"
              @click="selectClickEffect(index)"
            >
              {{ item }}
            </div>
          </div>
        </div>
        <div class="select-color-list">
          <div
            v-for="(item, index) in colorList"
            class="color-active"
            @click="selectColor(index)"
            :style="{
              borderRadius: 50 + '%',
              borderColor:
                index == colorIndex ? `rgba(${item})` : 'transparent',
            }"
            :key="index"
          >
            <div
              class="color-item"
              :style="{
                background: `rgba(${item})`,
              }"
            ></div>
          </div>
        </div>
        <div class="material-name no-transparency" style="padding: 0">
          <span style="margin-right: 30px">不透明度</span>
          <div class="slider">
            <van-slider
              max="1"
              min="0"
              step="0.01"
              v-model="colorOpct"
              active-color="linear-gradient(90deg, #dffabc 0%, #87f4df 100%)"
            >
              <template #button>
                <div class="custom-button"></div>
              </template>
            </van-slider>
          </div>
          <span> {{ Math.ceil(colorOpct * 100) }} %</span>
        </div>
      </div>
      <div class="animation">
        <div class="animation-item">
          <div>
            <div class="active-lig">入场动画</div>
            <div>离场动画</div>
          </div>
          <div class="animation-content">
            <div
              v-for="(item, index) in animation"
              @click="onSelectAnimation(index)"
              :key="index"
              :class="currentIx == index ? 'active-lig' : ''"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="btn-bottom van-hairline--top">
        <div @click="deleteImageItem">删除</div>
        <div @click="store.closeEditing">保存</div>
      </div>
    </div>
  </van-action-sheet>
</template>

<style lang="less" scoped>
.material-top {
  overflow: hidden;
  height: 280px;
  border-radius: 16px;
  margin-top: 32px;
  border: 1px solid #979797;
}
.custom-button {
  width: 34px;
  height: 34px;
  background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
  border: 1px solid #ffffff;
  border-radius: 50%;
}
.dialog-warp {
  display: flex;
  flex-direction: column;
  padding: 0 30px;
  span {
    margin-top: 42px;
    font-size: 26px;
    color: #333333;
  }
  .dialog-content {
    margin-top: 24px;
    width: 521px;
    background: #f8f8f8;
    border-radius: 16px;
    padding: 0 22px 0 20px;
    :deep(.van-cell) {
      background-color: #f8f8f8 !important;
    }
    .van-radio {
      width: 100%;
      height: 90px;
      display: flex;
      justify-content: space-between;
    }
  }
  .dialog-btn-bottom {
    display: flex;
    margin-top: 21px;
    margin-bottom: 30px;
    div:nth-child(1) {
      flex: 1;
      height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(90deg, #dffabc 0%, #87f4df 60%);
      border-radius: 16px;
      opacity: 0.5;
      border: 1px solid #87f4df;
      font-size: 28px;
      color: #49cb96;
      margin-right: 24px;
    }
    div:nth-child(2) {
      flex: 1;
      height: 70px;
      text-align: center;
      line-height: 70px;
      background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
      border-radius: 16px;
      font-size: 28px;
      color: #000000;
    }
  }
}

.active-lig {
  background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%) !important;
}

:deep(.van-cell__title) {
  display: flex;
  align-items: center;
  .GHmoban {
    width: 22px;
    height: 22px;
    margin-right: 10px;
  }
}

.bottom-sheet {
  padding: 0 28px;
  height: 1000px;
  overflow-y: scroll;
  :deep(.van-uploader) {
    width: 100%;
    .van-uploader__input-wrapper {
      width: 100%;
    }
  }
  .material-name {
    margin-top: 22px;

    font-size: 26px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    height: 90px;
    background: #ffffff;
    border-radius: 16px;
    :deep(.van-slider, ) {
      width: 387px;
    }
    :deep(.van-field) {
      padding: 0;
      width: 255px;
    }
    .slider {
      display: flex;
      align-items: center;
      margin-right: 30px;
    }
  }
  .no-transparency {
    background-color: #f8f8f8;
  }
  .click-effect {
    margin-top: 22px;
    font-size: 26px;
    padding: 27px 20px 16px;
    background: #f8f8f8;
    border-radius: 16px;
    .select-color-list {
      display: flex;
      justify-content: space-between;
      .color-item {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      .color-active {
        padding: 4px;
        border: 2px solid;
      }
    }
    .click-item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 21px;
      .click-right {
        display: flex;
        div {
          padding: 0 26px;
          height: 60px;
          background: #ededed;
          border-radius: 16px;
        }
        div:nth-child(1) {
          width: 156px;
          height: 60px;
          background: #ededed;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        > div:nth-child(2),
        div:nth-child(3) {
          width: 156px;
          height: 60px;
          margin-left: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 16px;
          font-size: 26px;
          color: #333333;
        }
      }
    }
  }
  .animation {
    // margin-bottom: 68px;
    .animation-item {
      margin-top: 20px;
      padding: 16px;
      background: #f8f8f8;

      div:first-child {
        display: flex;

        div {
          width: 156px;
          height: 60px;
          margin-bottom: 16px;
          font-size: 26px;
          background: #ededed;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        div:nth-child(2) {
          margin-left: 10px;
        }
      }
      .animation-content {
        height: 120px;
        display: flex;
        div {
          width: 90px;
          height: 120px;
          margin-right: 16px;
          background: #ededed;
          font-size: 14px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .btn-bottom {
    height: 223px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding-top: 30px;
    div {
      width: 335px;
      height: 90px;
      font-size: 28px;
      border-radius: 16px;
      text-align: center;
      line-height: 90px;
    }
    div:first-child {
      background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
      border-radius: 16px;
      border: 1px solid #87f4df;
      font-size: 28px;
      color: #49cb96;
      opacity: 0.6;
    }
    div:nth-child(2) {
      border-radius: 16px;
      background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
      font-size: 28px;
      color: #000000;
    }
  }
}
</style>
